import { useDispatch, useSelector } from 'react-redux'
import { checkedAll } from '../store/actions/todos'
import TodoItem from './TodoItem'
const TodoList = () => {
  const dispatch = useDispatch()
  // 所有任务列表
  // const list = useSelector((state) => state.todos)
  const list = useSelector((state) => {
    const { todos, filter } = state
    if (filter === 'Active') {
      return todos.filter((item) => !item.isDone)
    } else if (filter === 'Completed') {
      return todos.filter((item) => item.isDone)
    } else {
      return todos
    }
  })
  // 底部选择的完成状态
  // const type = useSelector((state) => state.filter)
  // 根据状态显示列表
  // const showList = list.filter((item) => {
  //   if (type === 'Active') {
  //     return item.isDone === false
  //   } else if (type === 'Completed') {
  //     return item.isDone === true
  //   } else {
  //     return item
  //   }
  // })
  // 全选
  const allChecked = (e) => {
    dispatch(checkedAll(e.target.checked, list))
  }
  return (
    <section className="main">
      <input
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
        onClick={allChecked}
      />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {/* {showList.map((item) => (
          <TodoItem item={item} key={item.id}></TodoItem>
        ))} */}
        {list.map((item) => (
          <TodoItem item={item} key={item.id}></TodoItem>
        ))}
      </ul>
    </section>
  )
}

export default TodoList
